<script setup>
// #region 引入包, 函数和组件
import { ref } from "vue";
import { useRoute } from "vue-router"; // 路由信息
// import { getdownload } from "@/api";
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const route = useRoute();
// #endregion

// #region // 变量

// #endregion

// #region // 函数

// #endregion

// #region // 生命周期和vue函数
// console.log(route);
// getdownload().then((res) => console.log(res));
// #endregion
</script>

<template>
  <router-view v-slot="{ Component }">
    <transition mode="out-in" name="page">
      <component :is="Component" :key="route.matched[0]?.path" />
    </transition>
  </router-view>
</template>

<style lang="scss">
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-style: normal;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

img {
  display: block;
}
p,
span,
a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

:root {
  font-size: calc(100vw / 375 * 100);
  --cl-blk: #191a1b;
  --cl-wh: #797d82;
}

body {
  font-size: 0.16rem;
}

#app,
html,
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.page-enter-active,
.page-leave-active {
  transition: transform 0.3s linear, opacity 0.3s linear;
}

.page-enter-active {
  transition-delay: 0.2s;
  transition-duration: 0.15s;
}

.page-leave-to,
.page-enter-from {
  opacity: 0;
  transform: translateY(0.3rem);
}
</style>
